

<template>
    <div class="sdy-detail">
        <SdyHeader title="啥都有 ~ 详情页" back></SdyHeader>
        详情页面
        <van-image :src="goodsInfo .img2"> 
        </van-image>
        <p>{{goodsInfo.proname}}</p>

    <Teleport to="#sdy-footer">
        <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon @click="$router.push({ path: '/cart' })" icon="cart-o" text="购物车" />
        <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
        <van-action-bar-button type="warning" @click="addCart" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>
    </Teleport>
    </div>
</template>

<script setup lang="ts">
// 拿到商品id 没有就跳转回列表页 
// 如果有就请求当前商品详细信息渲染在页面上
import { onMounted, ref } from 'vue'
import { useRoute, useRouter, type Router, type RouteLocationNormalized } from 'vue-router'
// useRoute接收传回来的数据
// useRouter是如果没有传来信息就返回上一级
import type { MyHotItem } from '@/config/inter'
import { Dialog } from 'vant'
import { getGoodsDetailApi } from '@/api/goods'


// 拿到钥匙  相当于vue2的this
const $route :RouteLocationNormalized = useRoute()
const $router:Router = useRouter()

//  验证是否存在proid
const testProid = ()=>{
    // 这个就是列表页传回来的id信息
    const proid = $route.query.proid
    // console.log(proid)
    if (!proid){
    // 详情信息没有提示 
        Dialog({
            title:'提示',
            message:'没有该商品'
        }).then(()=>{
            $router.back()
        })
    }


}

// 商品详细信息展示
// 准备一个数据 表示商品详细信息
const goodsInfo = ref<MyHotItem>({} as MyHotItem)
const getGoodsInfo = async()=>{
    const res = await getGoodsDetailApi( $route.query.proid as string)
// $route.query.proid 就是商id 
    console.log(res.data)
    goodsInfo.value = res.data
}


//加入购物车
const addCart = ()=>{
  console.log('加入购物车')  
}



onMounted(()=>{
    testProid()
    getGoodsInfo()
})




</script>

<style scoped lang="scss">

</style>